<template>
  <div class="app-container">
<!--    查询组件-->
    <div style="height: auto">
      <div style="">
        <div>
          <el-form :model="querydata">
            <el-button  style="display: inline-block;float: right;width: 100px" type="primary" @click="handlequery" >查询</el-button>
            <el-input v-model="querydata.remakes" placeholder="备注"  style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary"  ></el-input>
            <el-input v-model="querydata.modle" placeholder="型号"  style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary"  ></el-input>
            <el-input v-model="querydata.goodsName" placeholder="商品名称"  style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary"  ></el-input>
            <el-input v-model="querydata.typeName" placeholder="品名"  style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary"  ></el-input>
            <el-input v-model="querydata.billNum" placeholder="发票编号"  style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary"  ></el-input>
            <el-input v-model="querydata.contractNum" placeholder="合同编号"  style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary"  ></el-input>
          </el-form>
        </div>
      </div>
    </div>
<!--    表格组件-->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      :default-sort = "{prop: 'date', order: 'descending'}"
    >
      <el-table-column label="合同编号" width="180" align="center">
        <template slot-scope="scope">
          {{ scope.row.contractNum }}
        </template>
      </el-table-column>
      <el-table-column label="发票编号" width="95" align="center">
        <template slot-scope="scope">
          {{ scope.row.billNum }}
        </template>
      </el-table-column>
      <el-table-column prop="date" label="开票日期" width="160px" align="center" sortable>
        <template slot-scope="scope">
          {{ scope.row.billDate}}
        </template>
      </el-table-column>
      <el-table-column label="品名" width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.typeName }}
        </template>
      </el-table-column>
      <el-table-column label="商品名称" width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.goodsName }}
        </template>
      </el-table-column>
      <el-table-column label="型号" width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.modle }}
        </template>
      </el-table-column>
      <el-table-column label="关联数量" width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.correlationAccount }}
        </template>
      </el-table-column>
      <el-table-column prop="num" label="剩余数量" width="120" align="center" sortable>
        <template slot-scope="scope">
          {{ scope.row.remainAccount }}
        </template>
      </el-table-column>
      <el-table-column label="数量" width="80" align="center">
        <template slot-scope="scope">
          {{ scope.row.goodsAccount }}
        </template>
      </el-table-column>
      <el-table-column label="单价" width="80" align="center">
        <template slot-scope="scope">
          {{ scope.row.goodsUnitPrice }}
        </template>
      </el-table-column>
      <el-table-column label="金额" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.goodsSumPrice }}
        </template>
      </el-table-column>
      <el-table-column label="发票类型" width="80" align="center">
        <template slot-scope="scope">
          {{ scope.row.billType }}
        </template>
      </el-table-column>
      <el-table-column label="备注" width="270" align="center">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.remakes" style="display: block;width: 70%; float: left"/>
          <el-button type="text" size="small" style="float: left;margin-left: 10px" @click="handleSaveRemarks(scope.row)">保存</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <div class="pagination-container">

      <el-pagination
        background

        @current-change="handleCurrentChange"

        :current-page="pagination.currentPage"

        :page-size="pagination.pageSize"

        layout="total, prev, pager, next, jumper"

        :total="pagination.total">

      </el-pagination>
    </div>

  </div>
</template>

<script>
import api from '@/api/stock'

export default {
  data() {
    return {
      querydata:{},
      list: [],
      listLoading: true,
      pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize:10,//每页显示的记录数
        total:0,//总记录数
      },
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    //切换页码
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage
      this.getAll()
    },
    //查询所有
    getAll() {
      api.getList(this.pagination).then(response => {
        this.list = response.data.List
        this.pagination.currentPage = response.data.page.number + 1
        this.pagination.pageSize = response.data.page.size
        this.pagination.total = response.data.page.totalElements
        this.listLoading = false
        console.log(this.list)
        }
      )
    },
    handlequery(){
      let formdata = new FormData()
      formdata.append("currentPage",this.pagination.currentPage)
      formdata.append("pageSize", this.pagination.pageSize)
      if(this.querydata.remakes!=null&&this.querydata.remakes!="")
        formdata.append("remakes",this.querydata.remakes)
      if(this.querydata.modle!=null&&this.querydata.modle!="")
        formdata.append("modle",this.querydata.modle)
      if(this.querydata.goodsName!=null&&this.querydata.goodsName!="")
        formdata.append("goodsName",this.querydata.goodsName)
      if(this.querydata.typeName!=null&&this.querydata.typeName!="")
        formdata.append("typeName",this.querydata.typeName)
      if(this.querydata.billNum!=null&&this.querydata.billNum!="")
        formdata.append("billNum",this.querydata.billNum)
      if(this.querydata.contractNum!=null&&this.querydata.contractNum!="")
        formdata.append("contractNum",this.querydata.contractNum)
      api.query(formdata).then(response=>{
        this.list = response.data.List
        this.pagination.currentPage = response.data.page.number + 1
        this.pagination.pageSize = response.data.page.size
        this.pagination.total = response.data.page.totalElements
        console.log(this.List)
      })
    },
    handleSaveRemarks(row){
      api.SaveRemarks(row).then(()=>{
        this.getAll()
      })
    },

    fetchData() {
      this.listLoading = true

      this.getAll()
    },

  }
}
</script>
